<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>练多多</title>
<link href="/css/main.css" rel="stylesheet" type="text/css" />
<link href="/css/test.css" rel="stylesheet" type="text/css" />

<style>
.hasBeenAnswer {
	background: #5d9cec;
	color:#fff;
}

</style>
</head>

<body>
	<div class="main">
		<!--nr start-->
		<div class="test_main">
			<div class="nr_left">
				<div class="test">
					<form action="" method="post">
						<div class="test_title">
							<p class="test_time">
								<i class="icon iconfont">&#xe6fb;</i><b class="alt-1">01:40</b>
							</p>
							<font><input id="test_jiaojuan" type="button" name="test_jiaojuan" value="交卷"></font>
						</div>
						
							<div class="test_content">
								<div class="test_content_title">
									<h2>单选题</h2>
									<p>
										<span>共</span><i class="content_lit">60</i><span>题</span>
									</p>
								</div>
							</div>
						<c:forEach var="i" begin="1" end="60">
							<div class="test_content_nr">
								<ul >
									<li id="qu_0_0${i}">
											<div class="test_content_nr_tt">
												<i><c:out value="${i}" /></i><font>${topicList[i-1].getTopicContent()}</font><b class="icon iconfont">&#xe881;</b>
											</div>
											<div class="test_content_nr_main">
												<ul class="timu">
													
														<li class="option">
															
																<input type="radio" class="radioOrCheck" name="answer${i }"
																	id="0_answer_${i }option_1"
																/>
															
															
															<label for="0_answer_${i }option_1">
																
																<p class="ue" style="display: inline;">${topicList[i-1].getOptionA()}</p>
															</label>
														</li>
													
														<li class="option">
															
																<input type="radio" class="radioOrCheck" name="answer${i }"
																	id="0_answer_${i }_option_2"
																/>
															
															
															<label for="0_answer_${i }_option_2">
																
																<p class="ue" style="display: inline;">${topicList[i-1].getOptionB()}</p>
															</label>
														</li>
													<c:if test="${topicList[i-1].getOptionC() != null }">
														<li class="option">
															
																<input type="radio" class="radioOrCheck" name="answer${i }"
																	id="0_answer_${i }_option_3"
																/>
															
														
															<label for="0_answer_${i }_option_3">
																
																<p class="ue" style="display: inline;">${topicList[i-1].getOptionC()}</p>
															</label>
														</li>
													</c:if>
													<c:if test="${topicList[i-1].getOptionC() != null }">
														<li class="option">
															
																<input type="radio" class="radioOrCheck" name="answer${i }"
																	id="0_answer_${i }_option_4"
																/>
															
															
															<label for="0_answer_${i }_option_4">
																
																<p class="ue" style="display: inline;">${topicList[i-1].getOptionD()}</p>
															</label>
														</li>
													</c:if>
													<li class="option">
														<p class="ue" id="idOption" style="display: inline;color:red;display:none;">答案：${topicList[i-1].getTopicAnswer()}</p>
													</li>
													<li class="option">
														<p class="ue" id="idOption" style="display: inline;color:red;display:none;">解说：${topicList[i-1].getTopicExplain()}</p>
													</li>
												</ul>
											</div>
										</li>
										
								</ul>
							</div>
						</c:forEach>
<!-- 							<div class="test_content"> -->
<!-- 								<div class="test_content_title"> -->
<!-- 									<h2>多选题</h2> -->
<!-- 									<p> -->
<!-- 										<span>共</span><i class="content_lit">40</i><span>题</span> -->
<!-- 									</p> -->
<!-- 								</div> -->
<!-- 							</div> -->
<%-- 						<c:forEach var="i" begin="1" end="40"> --%>
<!-- 							<div class="test_content_nr"> -->
<!-- 								<ul> -->
<%-- 									<li id="qu_1_0${i }"> --%>
<!-- 											<div class="test_content_nr_tt"> -->
<%-- 												<i><c:out value="${i}" /></i><span>(1分)</span><font>以下属于南方电网员工职业操守中明文规定的有()</font><b class="icon iconfont">&#xe881;</b> --%>
<!-- 											</div> -->

<!-- 											<div class="test_content_nr_main"> -->
<!-- 												<ul> -->
													
<!-- 														<li class="option"> -->
															
															
<!-- 																<input type="checkbox" class="radioOrCheck" name="answer1" -->
<%-- 																	id="1_answer_${i }_option_1" --%>
<!-- 																/> -->
															
<%-- 															<label for="1_answer_${i }_option_1"> --%>
<!-- 																A. -->
<!-- 																<p class="ue" style="display: inline;">热爱祖国、热爱南网、热爱岗位</p> -->
<!-- 															</label> -->
<!-- 														</li> -->
													
<!-- 														<li class="option"> -->
															
															
<!-- 																<input type="checkbox" class="radioOrCheck" name="answer1" -->
<%-- 																	id="1_answer_${i }_option_2" --%>
<!-- 																/> -->
															
<%-- 															<label for="1_answer_${i }_option_2"> --%>
<!-- 																B. -->
<!-- 																<p class="ue" style="display: inline;">遵纪守法、忠于职守、令行禁止</p> -->
<!-- 															</label> -->
<!-- 														</li> -->
													
<!-- 														<li class="option"> -->
															
															
<!-- 																<input type="checkbox" class="radioOrCheck" name="answer1" -->
<%-- 																	id="1_answer_${i }_option_3" --%>
<!-- 																/> -->
															
<%-- 															<label for="1_answer_${i }_option_3"> --%>
<!-- 																C. -->
<!-- 																<p class="ue" style="display: inline;">客户至上、诚实守信、优质服务</p> -->
<!-- 															</label> -->
<!-- 														</li> -->
													
<!-- 														<li class="option"> -->
															
															
<!-- 																<input type="checkbox" class="radioOrCheck" name="answer1" -->
<%-- 																	id="1_answer_${i }_option_4" --%>
<!-- 																/> -->
															
<%-- 															<label for="1_answer_${i }_option_4"> --%>
<!-- 																D. -->
<!-- 																<p class="ue" style="display: inline;">公平竞争、互相监督、服从监管</p> -->
<!-- 															</label> -->
<!-- 														</li> -->
													
<!-- 												</ul> -->
<!-- 											</div> -->
<!-- 										</li> -->
										
									
										
													
								
									
<!-- 								</ul> -->
<!-- 							</div> -->
<%-- 						</c:forEach> --%>
						
					</form>
				</div>

			</div>
			<div class="nr_right">
				<div class="nr_rt_main">
					<div class="rt_nr1">
						<div class="rt_nr1_title">
							<h1>
								<i class="icon iconfont">&#xe692;</i>答题卡
							</h1>
							<p class="test_time">
								<i class="icon iconfont">&#xe6fb;</i><b class="alt-1">01:40</b>
							</p>
						</div>
						
							<div class="rt_content">
								<div class="rt_content_tt">
									<h2>单选题</h2>
									<p>
										<span>共</span><i class="content_lit">60</i><span>题</span>
									</p>
								</div>
								<div class="rt_content_nr answerSheet">
									<ul>
										
										<c:forEach var="i" begin="1" end="60">
											<li><a href="#qu_0_0${i}" ><c:out value="${i}" /></a></li>
										</c:forEach>
										
									</ul>
								</div>
							</div>
						
<!-- 							<div class="rt_content"> -->
<!-- 								<div class="rt_content_tt"> -->
<!-- 									<h2>多选题</h2> -->
<!-- 									<p> -->
<!-- 										<span>共</span><i class="content_lit">40</i><span>题</span> -->
<!-- 									</p> -->
<!-- 								</div> -->
<!-- 								<div class="rt_content_nr answerSheet"> -->
<!-- 									<ul> -->
<%-- 										<c:forEach var="i" begin="1" end="40"> --%>
<%-- 											<li><a href="#qu_1_0${i}"><c:out value="${i}" /></a></li> --%>
<%-- 										</c:forEach> --%>
											
										
<!-- 									</ul> -->
<!-- 								</div> -->
<!-- 							</div> -->
						
					</div>

				</div>
			</div>
		</div>
		<!--nr end-->
		<div class="foot"></div>
	</div>

	<script src="/js/jquery-1.11.3.min.js"></script>
	<script src="/js/jquery.easy-pie-chart.js"></script>
	<!--时间js-->
	<script src="/js/time/jquery.countdown.js"></script>
	<script>
		window.jQuery(function($) {
			"use strict";
			
			$('time').countDown({
				with_separators : false
			});
			$('.alt-1').countDown({
				css_class : 'countdown-alt-1'
			});
			$('.alt-2').countDown({
				css_class : 'countdown-alt-2'
			});
			
		});
		
		
		$(function() {
			$("#test_jiaojuan").click(function(){
				check();
			});
			
			$('li.option label').click(function() {
				//debugger;
				var examId = $(this).closest('.test_content_nr_main').closest('li').attr('id'); // 得到题目ID
				var cardLi = $('a[href=#' + examId + ']'); // 根据题目ID找到对应答题卡
				// 设置已答题
				
				
					
				if(!cardLi.hasClass('hasBeenAnswer')){
					cardLi.addClass('hasBeenAnswer');
				}
				
			});
		});
		
		function check(){
// 			debugger;
// 			var falg = false;
// 			var radios = $(".radioOrCheck");
// 			$(radios).each(function(n,value){
// 				if($(this).checked == false){
// 					falg = true;
// 				}
// 			});
// 			if(falg == true){
// 				$(".ue").attr("style","display: inline;color:red;display:block;");
// 			}else{
// 				alert(123);
// 			}
			var inCheck=0;

			$(".timu").each(function(){
				var checkInt=$(this).find("input:checked");
				if(checkInt.length>0){
					inCheck++;
				}
			});
			if(inCheck>=60){
				$(".ue").attr("style","display: inline;color:red;display:block;");
			}else{
				alert("请完成所有试题！");
			}
		}
		
	</script>


</body>

</html>